import ProLayout, {
  PageContainer,
  SettingDrawer,
} from '@ant-design/pro-layout';
import { Button, Select, message, Popconfirm, Space, Breadcrumb } from 'antd';
import ProTable, { EditableProTable } from '@ant-design/pro-table';
import ProCard from '@ant-design/pro-card';
import { useEffect, useRef, useState } from 'react';
import {
  PlusOutlined,
  UserAddOutlined,
  SolutionOutlined,
} from '@ant-design/icons';
import styles from './index.less';
import dataList from './component/data.json';
import { useSet } from 'ahooks';
const { Option } = Select;
import moment from 'moment';
import { Heatmap } from '@ant-design/charts';
import { useRequest, Link, history } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  ProFormDatePicker,
  ProFormDependency,
} from '@ant-design/pro-components';
import { getValueByLabel, getLabelByValue } from './component/getValueLable';
import useGetLike from './component/useGetLike';

const UserManagement = () => {
  const [directionList, setDirectionList] = useState<any>(); //方向下拉框
  const [groupList, setGroupList] = useState<any>(); //子方向下拉框
  //获取当前用户信息
  const getUserInfo = useRequest((data = null) => {
    return {
      url: `http://10.1.40.84:9993/user/getUserInfo`,
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });

  const getUnit = useRequest((data = {}) => {
    return {
      url: 'http://10.1.40.84:9993/getLike',
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data: { ...data, field: 'unit' },
    };
  });

  //多重查找
  const findUserByMutilatePart = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/user/findUserByMutilatePart',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //添加用户
  const insertUser = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/insertUser',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //删除用户
  const delUserById = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/delUserById',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const confirm = (e: any) => {
    delUserById.run({ id: e.id }).then(() => {
      findUserByMutilatePart.run();
      message.success('删除成功');
    });
  };
  const cancel = (e: any) => {
    message.error('已取消');
  };

  useEffect(() => {
    if (getUserInfo.data) {
      const personInfo = JSON.parse(localStorage.getItem('personInfo') || '{}');
      if (personInfo.ROLE_管理员?.direction) {
        setDirectionList(personInfo.ROLE_管理员?.direction);
      } else {
        setDirectionList([
          {
            label: getUserInfo?.data?.userGroupBo?.directionName,
            value: getUserInfo?.data?.userGroupBo?.directionId,
          },
        ]);
      }

      if (personInfo.ROLE_管理员?.group) {
        setGroupList(personInfo.ROLE_管理员?.group);
      } else if (personInfo.ROLE_方向负责人?.group) {
        setGroupList(personInfo.ROLE_方向负责人?.group);
      } else {
        setGroupList([
          {
            label: getUserInfo?.data?.userGroupBo?.groupName,
            value: getUserInfo?.data?.userGroupBo?.groupId,
          },
        ]);
      }
    }
  }, [getUserInfo.data]);

  const columnsChanged: any = [
    {
      title: '工号',
      dataIndex: getValueByLabel('用户名'),
      key: getValueByLabel('用户名'),
      align: 'center',
      className: styles.columns,
    },
    {
      title: '姓名',
      dataIndex: getValueByLabel('姓名'),
      key: getValueByLabel('姓名'),
      align: 'center',
      className: styles.columns,
    },
    {
      title: '性别',
      dataIndex: getValueByLabel('性别'),
      key: getValueByLabel('性别'),
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '民族',
      dataIndex: getValueByLabel('民族'),
      key: getValueByLabel('民族'),
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '人员类别',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      className: styles.columns,
      hideInTable: true,
      renderFormItem: () => (
        <Select placeholder="请选择">
          <Option key={'固定人员'} value={'固定人员'}>
            固定人员
          </Option>
          <Option key={'流动人员'} value={'流动人员'}>
            流动人员
          </Option>
          <Option key={'非本室人员'} value={'非本室人员'}>
            非本室人员
          </Option>
        </Select>
      ),
    },
    {
      title: '学院',
      dataIndex: getValueByLabel('学院'),
      key: getValueByLabel('学院'),
      align: 'center',
      className: styles.columns,
      renderFormItem: () => (
        <Select
          showSearch
          filterOption={(input, option) =>
            (option!.children as unknown as string)
              .toLowerCase()
              .includes(input.toLowerCase())
          }
          placeholder="请选择"
        >
          {getUnit?.data?.map((item: any) => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      ),
    },
    {
      title: '研究方向',
      dataIndex: 'directionId',
      key: 'directionId',
      align: 'center',
      hideInTable: true,
      className: styles.columns,
      renderFormItem: () => (
        <Select
          showSearch
          filterOption={(input, option) =>
            (option!.children as unknown as string)
              .toLowerCase()
              .includes(input.toLowerCase())
          }
          placeholder="请选择"
        >
          {directionList?.map((item: any) => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      ),
    },
    {
      title: '子方向',
      dataIndex: 'groupId',
      key: 'groupId',
      align: 'center',
      hideInTable: true,
      className: styles.columns,
      renderFormItem: () => (
        <Select
          showSearch
          filterOption={(input, option) =>
            (option!.children as unknown as string)
              .toLowerCase()
              .includes(input.toLowerCase())
          }
          placeholder="请选择"
        >
          {groupList?.map((item: any) => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      ),
    },
    {
      title: '入站时间',
      dataIndex: getValueByLabel('入站时间'),
      key: getValueByLabel('入站时间'),
      align: 'center',
      hideInSearch: true,
      className: styles.columns,
    },
    {
      title: '出站时间',
      dataIndex: getValueByLabel('出站时间'),
      key: getValueByLabel('出站时间'),
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '生日',
      dataIndex: getValueByLabel('生日'),
      key: getValueByLabel('生日'),
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '手机号码',
      dataIndex: getValueByLabel('手机号码'),
      key: getValueByLabel('手机号码'),
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '操作',
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
      fixed: 'right',
      render: (text: any, record: any) => (
        <Space>
          <Link to={'/SystemManage/UserManagement/UserDetail/' + record.id}>
            查看
          </Link>
          <Popconfirm
            key={'2'}
            title="确定删除吗？"
            onConfirm={() => confirm(record)}
            onCancel={() => cancel}
            okText="确定"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <PageContainer
      header={{
        title: ' ',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>系统管理</Breadcrumb.Item>
            <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
    >
      <ProTable
        rowKey={'id'}
        dataSource={findUserByMutilatePart?.data}
        request={async (param) => {
          var tableData: any = [];
          await findUserByMutilatePart.run(param).then((data) => {
            tableData = data;
          });
          return { data: tableData || [], seccess: true };
        }}
        // search={{ labelWidth: 'auto' }}
        columns={columnsChanged}
        headerTitle={
          <Space>
            <SolutionOutlined />
            <strong>{' 用户列表'}</strong>
          </Space>
        }
        toolBarRender={() => [
          <Button
            icon={<UserAddOutlined />}
            type="primary"
            onClick={() => {
              history.push('/SystemManage/UserManagement/UserDetail/new');
            }}
          >
            新建用户
          </Button>,
        ]}
        pagination={{ pageSize: 10 }}
        search={{
          // collapseRender: false,
          // collapsed: false,
          labelWidth: 'auto',
        }}
      />
    </PageContainer>
  );
};

export default UserManagement;
